<template>
  <div class="journalBox">
    <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <div class="main">
     
      <div class="mainBox" v-for="(item,index) in tableData" :key="index">
        <van-row>
          <van-col span="1"></van-col>
          <van-col span="22">
            <van-image
              width="100%"
              height="11.215rem"
              :src='item.src'
            />

            <div class="word">
              <van-row>
                <van-col span="18" align="left">
                  <span>{{item.title}}</span>
                </van-col>
                <van-col span="6">
                  <van-button round type="primary" size="mini"
                    >点击阅读</van-button
                  ></van-col
                >
              </van-row>
            </div>

            <div class="describe">
              <p>
                {{item.content}}
              </p>
            </div>
          </van-col>
          <van-col span="1"></van-col>
        </van-row>
      </div>
    </div>

    <div class="footer">
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="search" icon="search">品质档案</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o"
          >电子月刊</van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="comment-o"
          >投诉维权</van-tabbar-item
        >
        <van-tabbar-item name="me" icon="manager-o">我</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",

      tableData:[
          {
              id:1,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },
          {
              id:2,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },{
              id:3,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },{
              id:4,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },{
              id:5,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },{
              id:6,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          },{
              id:7,
              src:"https://img01.yzcdn.cn/vant/cat.jpeg",
              title:'《消费杂志》2021年第12期',
              content:'Impedit commodi saepe similique id cupiditate ullam corporis tempore, quae totam, minima voluptatibus?'
          }
      ]
    };
  },
};
</script>

<style lang="less" scoped>
.journalBox {
  .main {
    .mainBox {
      margin-top: 0.8125rem;
      // border: 1px solid #000;
      .word {
        text-align: center;
        color: rgba(42, 131, 78, 1);
        font-weight: bold;
        height: 1.5rem;
        margin: 0.625rem 0;
      }
      .describe {
        width: "21.68rem";
        height: "4.375rem";
        background-color: rgba(239, 239, 239, 1);
        color: rgba(80, 80, 80, 1);
        text-align: left;
        p {
          margin: 0;
          padding: 0.625rem 0.3rem;
        }
      }
    }
  }
}
</style>

